<template>
  <div class="content-right-header">
    <div class="content-right-header-info">
      <div
        class="right-header-item"
        :class="{ 'right-header-item-select': curNoteChild === noteUnread }"
        @click="handleSwitchChild(noteUnread)"
      >
        未读(992)
      </div>
      <div
        class="right-header-item"
        :class="{ 'right-header-item-select': curNoteChild === noteRead }"
        @click="handleSwitchChild(noteRead)"
      >
        已读
      </div>
      <div
        class="right-header-item"
        :class="{ 'right-header-item-select': curNoteChild === noteAll }"
        @click="handleSwitchChild(noteAll)"
      >
        全部
      </div>
    </div>
    <div v-show="curNoteChild === noteUnread" class="content-right-header-handle">
      全部设为已读
    </div>
  </div>
  <div v-if="curNoteChild === noteUnread">
    <note-unread />
  </div>
  <div v-if="curNoteChild === noteRead">
    <note-read />
  </div>
  <div v-if="curNoteChild === noteAll">
    <note-all />
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onBeforeMount, onMounted } from 'vue';
  import NoteUnread from '@/views/board-home/components/note-unread.vue';
  import NoteRead from '@/views/board-home/components/note-read.vue';
  import NoteAll from '@/views/board-home/components/note-all.vue';
  import VueEvent from '@/helper/event';
  import { HOME_NOTE_UNREAD, HOME_NOTE_READ, HOME_NOTE_ALL } from '@/helper/constant';
  export default defineComponent({
    name: 'NoteInfo',
    components: {
      NoteUnread,
      NoteRead,
      NoteAll,
    },
    setup() {
      const state = reactive({
        curNoteChild: HOME_NOTE_UNREAD, //当前批注
        noteUnread: HOME_NOTE_UNREAD, //未读
        noteRead: HOME_NOTE_READ, //已读
        noteAll: HOME_NOTE_ALL, //全部
      });
      const methods = {
        handleSwitchChild(childType) {
          //切换流程下的类型
          state.curNoteChild = childType;
        },
      };
      onBeforeMount(() => {});
      onMounted(() => {});
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .content-right-header {
    width: 100%;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    border: 1px solid #f5f5f5;
    .content-right-header-info {
      display: inline-flex;
      align-items: center;
    }
    .right-header-item {
      font-size: 14px;
      color: #8d98ab;
      margin-right: 20px;
      cursor: pointer;
    }
    .right-header-item-select {
      padding: 6px 8px;
      background: #deeffe;
      border: 1px solid #deeffe;
      border-radius: 8px;
      color: #3f3f3f;
    }
    .finish-status-box {
      width: 84px;
      height: 26px;
      line-height: 26px;
      display: inline-flex;
      align-items: center;
      .finish-status-item {
        width: 42px;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        border-top: 1px solid #8d98ab;
        border-bottom: 1px solid #8d98ab;
        color: #8d98ab;
        cursor: pointer;
      }
      .status-item-left {
        border-left: 1px solid #8d98ab;
        border-radius: 8px 0 0 8px;
      }
      .status-item-right {
        border-right: 1px solid #8d98ab;
        border-radius: 0 8px 8px 0;
      }
      .status-item-left-select {
        border-right: 1px solid #3265f5;
      }
      .status-item-right-select {
        border-left: 1px solid #3265f5;
      }
      .status-item-select {
        border-color: #3265f5;
        color: #3265f5;
      }
    }
    .content-right-header-handle {
      color: #3265f5;
      cursor: pointer;
    }
  }
</style>
